<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;

        }
        body{
            background:#ddd;
        }
        #canvas{
            margin:10px;
            padding:10px;
            background: #a6e0ff;
            border:thin inset #aaa;
        }
    </style>
    <script>
        onload=function(){
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');//d必须小写
            var h=canvas.height;
            var w=canvas.width;
            context.font='10px 黑体';
            context.fillStyle='green'
            var lineNum=1;
            var hopeLineNum=20;
            var arr=[1];
            var str="1";
            var startHeight=30;
            var textWidth=0;


            function doTheMath(arr){
                var returnArr=[];
                for(i=0;i<arr.length-1;i++){
                    returnArr.push(arr[i]+arr[i+1])
                }
                returnArr.unshift(1);
                returnArr.push(1);
                return returnArr;
            }

            for(lineNum=1;lineNum<=hopeLineNum;lineNum++){
                if(lineNum==1){
                    arr=[1];
                }
                else if(lineNum==2){
                    arr=[1,1];
                }
                else {
                    arr=doTheMath(arr);
                }

                str=arr.join(" ");
//                1
//               1 1
//              1 2 1
//             1 3 3 1
//            1 4 6 4 1
                textWidth=context.measureText(str).width;
                context.fillText(str,(w-textWidth)/2,startHeight+=20);

            }





            //var textWidth=context.measureText(i).width;


        }
    </script>
</head>
<body>
<canvas id='canvas' width='600' height='600'>
    Canvas not supported!
</canvas>
</body>
</html>